<template>
	<view>
		<!-- 自定义导航栏 -->
		
		<uni-nav-bar 
		left-icon="back"
		statusBar
		:border="false"
		@click-left="goBack"
		>
			<view class="flex align-center justify-center w-100">
				所有人可见
				<text class="iconfont icon-shezhi px-1"></text>
			</view>
		</uni-nav-bar>
		<!-- 文本区域 -->
		<textarea class="w-100 p-2" v-model="content" placeholder="说一句话吧..." />
		<!-- 上传图片 -->
		<upLoadImage ref='upLoadImage' :show="show" :list='imageList' @change="changeImgae"></upLoadImage>
		<!-- 底部栏 -->
		<view class="fixed-bottom flex justify-between align-center">
			<view class="flex mx-3">
				<view class="iconfont icon-caidan px-1 font-btn animated" hover-class="jello"></view>
				<view class="iconfont icon-huati px-1 font-btn animated" hover-class="jello"></view>
				<view class="iconfont icon-tupian px-1 font-btn animated" hover-class="jello" @click="iconClickEvent('upLoadImage')"></view>
			</view>
			<view 
			class="bg-main text-white mx-3 rounded flex align-center justify-center animated" 
			style="width: 140rpx;height: 60rpx;"
			hover-class="pulse"
			>
				发送
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import upLoadImage from '@/components/common/upLoadImage.vue'
	export default{
		components:{uniNavBar, upLoadImage},
		data() {
			return {
				content:'',
				imageList:[],
				// 是否弹出提示框
				showBack:false
			}
		},
		// 监听返回
		onBackPress() {
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					    content: '是否要保存为草稿？',
						showCancel:true,
						cancelText:'不保存',
						confirmText:'保存',
					    success: res => {
					        if (res.confirm) {
					            this.store()
					        } else {
								// 取消保存就要清除缓存
								uni.removeStorage({
								    key: 'addInput',
								    success: res => {
								        console.log('success');
								    }
								});
							}
							uni.navigateBack({
								delta:1
							})
					    }
				});
				// 避免提示框一直显示
				this.showBack = true
				return true
			}
		},
		onLoad() {
			// 读取本地数据
			uni.getStorage({
			    key: 'addInput',
			    success: res => {
			        let result = JSON.parse(res.data)
					this.content = result.content
					this.imageList = result.img
			    }
			})
		},
		computed:{
			show() {
				return this.imageList.length > 0
			}
		},
		methods:{
			iconClickEvent(index) {
				switch(index) {
					case 'upLoadImage':
					// 调用子组件中的函数
					this.$refs.upLoadImage.chooseImage()
					break
				}
			},
			changeImgae(e) {
				this.imageList = e
			},
			// 返回上一步
			goBack(){
				uni.navigateBack({ delta: 1 });
			},
			// 保存草稿到本地
			store() {
				let obj = {
					content:this.content,
					img:this.imageList
				}
				uni.setStorage({
				    key: 'addInput',
				    data: JSON.stringify(obj)
				});
			}
		}
	}
</script>

<style>
	.font-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
	}
</style>
